@extends('admin.layout.base')
@section('styles')
    <style>
        .category-img{
            width: 100px;
            height: 100px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .category-uploader-icon{
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 100px;
            text-align: center;
        }

    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-list">
            <div class="panel-header"> <div class="panel-title"> 类目管理 </div> </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          :data="listData" border>
                    <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                    <el-table-column prop="title_show" label="名称" width="450"></el-table-column>
                    <el-table-column align="center" prop="sort" label="排序" width="80"></el-table-column>
                    <el-table-column align="center" prop="created_at" label="添加日期" width="180"></el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                            <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData">
                    <div class="pagination-total">共 <em> @{{listData.length}} </em> 条记录</div>
                </div>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item :rules="[{ required: true, message: '请输入类目名称', trigger: 'blur'}]" label="类目名称：" prop="name">
                    <el-input clearable  v-model="form.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请选择上级分类', trigger: 'blur'}]" label="上级类目：" prop="pid">
                    <el-select v-model="form.pid" filterable placeholder="请选择上级分类">
                        <el-option v-for="item in cateTree" :key="item.id" :label="item.title_show" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选中前图标：" prop="before_icon">
                    <el-upload class="category-uploader" name="image"
                               :action="upload_image"
                               :show-file-list="false"
                               :limit="1"
                               :on-success="uploadSuccess"
                               :before-upload="uploadBefore">
                        <img v-if="form.before_icon" :src="form.before_icon" class="category-img">
                        <i v-else class="el-icon-plus category-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB!</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="选中后图标：" prop="after_icon">
                    <el-upload class="category-uploader" name="image"
                               :action="upload_image"
                               :show-file-list="false"
                               :limit="1"
                               :on-success="uploadSuccess1"
                               :before-upload="uploadBefore">
                        <img v-if="form.after_icon" :src="form.after_icon" class="category-img">
                        <i v-else class="el-icon-plus category-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB!</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类目排序：" prop="sort">
                    <el-input clearable  v-model="form.sort" placeholder="请输入类目排序"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    loading: false,
                    upload_image: UPLOAD_IMAGE,
                    dialog: {
                        title: '',
                        top: '15vh',
                        show: false,
                        width: '600px'
                    },
                    form:null,
                    cateTree: [],
                }
            },
            created(){
                this.list();
            },
            methods: {
                uploadSuccess(res) {
                    this.form.before_icon = res.data.path;
                },
                uploadSuccess1(res) {
                    this.form.after_icon = res.data.path;
                },
                uploadBefore(file) {
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('图片大小不能超过 2MB!');
                    }
                    return isLt2M;
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    let cateInit = [{id:0,title_show:'顶级分类'}];
                    setTimeout(()=>{
                        $.get("{{ route('admin.goodscate.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.cateTree = cateInit.concat(res.data);
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //新增
                create(){
                    this.form = {
                        id: 0,
                        name: '',
                        pid: 0,
                        before_icon: '',
                        after_icon: '',
                        sort: 0,
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '新增类目';
                    this.dialog.show = true;
                },
                //编辑
                edit(info){
                    this.form = {
                        id: info.id,
                        name: info.name,
                        pid: info.pid,
                        before_icon: info.before_icon,
                        after_icon: info.after_icon,
                        sort: info.sort,
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '编辑类目';
                    this.dialog.show = true;
                },
                //更新
                update(){
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let that = this;
                            $.post("{{ route('admin.goodscate.update') }}",this.form,function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        type: 'success',
                                        duration: '1000',
                                        message: res.msg,
                                        onClose:() =>{
                                            that.dialog.show = false;
                                            that.list();
                                        }
                                    });
                                }
                            },'JSON');
                        }
                    });
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要删除该类目信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.goodscate.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
            }
        });
    </script>
@endsection
